<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>慕课七夕主题</title>
	<link rel="stylesheet" href="../css/style.css">
	<link rel="stylesheet" href="../css/pageA.css">
	<script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
	<script src="../js/Swipe.js"></script>
</head>
<body>
	<div id="content">
		<ul class="content-wrap">
			
			<li>
				<div class="a_background">
					<div class="a_background_top"></div>
					<div class="a_background_middle"></div>
					<div class="a_background_botton"></div>
				</div>
			</li>
			<!-- 第二幅画面 -->
			<li>页面2</li>
			<!-- 第三幅画面 -->
			<li>页面3</li>
		</ul>
		<div id="boy" class="charactor slowWalk"></div>
		<div class="button">
			<button>点击开始走路</button>
		</div>
	</div>
	<!-- <script>
		var swipe = Swipe($("#content"));
		$('button').click(function() {
			//调用接口
			swipe.scrollTo($("#content").width() * 2,500);
		});
	</script> -->
	<!-- <script>
		var container = $(content);
		//获取第一个子节点
		var element = container.find(":first");
		//Li页面数量
		var slides = element.find("li");
		//获取容器尺寸
		var width = container.width();
		var height = container.height();
		//设置Li页面总宽度
		element.css({
			width: (slides.length * width) + "px",
			height: height + "px"
		});
		//设置每一个页面li的宽度
		$.each(slides,function(index) {
			var slide = slides.eq(index);
			//获取每一个li元素
			slide.css({
				//设置每一个li的尺寸
				width: width + "px",
				height: height + "px"
			});
		});
		//绑定事件
		$("button").click(function() {
			//在5秒的时间内，移动x轴的位置，为两个页面单位
			element.css({
                'transition-timing-function': 'linear',
                'transition-duration': '5000ms',
                'transform': 'translate3d(-' + (width * 2) + 'px,0px,0px)'
			})
		})
	</script> -->
	<script>
		var swipe = Swipe($("#content"));
		//获取数据
		var getValue = function(className) {
			var $elem = $('' + className + '');
			//走路的路线坐标
			return {
				height: $elem.height(),
				top: $elem.position().top
			};
		};
		//路的Y轴
		var pathY = function() {
			var data = getValue('.a_background_middle');
			return data.top + data.height / 2;
		}();
		var $boy = $("#boy");
		var boyHeight = $boy.height();
		//修正小男孩的正确位置
		//路的中间位置减去小孩的高度，25是一个修正值
		$boy.css({
			top: pathY - boyHeight + 25
		});

		//绑定一个点击事件，开始走路
		$("button").click(function() {
			// left的变化
			$boy.transition({
				'left': $("#content").width() + 'px',
			}, 10000, 'linear', function() {});
		});

		//增加精灵动画
		// $('button').click(function() {
		// 	//增加走路的css3关键帧规则
		// 	$boy.addClass('slowWalk');
		// })
	</script>
</body>
</html>